<template>
  <div class="g-bd">
    <!-- 推荐节目 -->
    <div class="recommend">
      <div class="blk">
        <div class="u-title">
          <h3>推荐节目</h3>
          <span class="sub">(每日更新)</span>
        </div>
        <ul class="topl">
          <li
            v-for="(radio, index) in recomDjList"
            :key="radio.id"
            :class="index % 2 !== 0 ? 'bg' : ''"
          >
            <router-link :to="`/program?id=${radio.id}`" class="a-imgwrap f-fl"
              ><img :src="radio.coverUrl + '?param=40x40'" alt="" />
              <i class="u-iconall ply" @click.prevent="playList(radio)"></i
            ></router-link>
            <div class="f-fl cnt-wrap">
              <h3>
                <router-link :to="`/program?id=${radio.id}`" :title="radio.name">{{
                  radio.name
                }}</router-link>
              </h3>
            </div>
            <div class="artist col">
              <router-link :to="`/djradio?id=${radio.radio.id}`" :title="radio.dj.brand">{{
                radio.dj.brand
              }}</router-link>
            </div>
            <div class="palyCount col">播放{{ radio.listenerCount }}</div>
            <div class="like col">点赞{{ radio.likedCount }}</div>
            <a
              :href="'/discover/djradio/category?cateId=' + radio.radio.categoryId"
              class="f-fl tag"
              @click.prevent="
                $router.push('/discover/djradio/category?cateId=' + radio.radio.categoryId)
              "
              >{{ radio.radio.category }}</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 推荐节目列表
      recomDjList: []
    }
  },
  methods: {
    // 获取推荐节目数据
    async getRecomDj() {
      const { data } = await this.$http.get('/program/recommend')
      this.recomDjList = data.programs
      // console.log(data)
    },
    // 将播放列表替换为榜单列表
    async playList(program) {
      let tracks = program.mainSong
      tracks.al = tracks.album
      tracks.ar = tracks.artists
      tracks.al.id = tracks.id
      tracks.al.name = tracks.name
      tracks.al.picUrl = program.coverUrl
      tracks.dt = tracks.duration
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(tracks.id)) {
        index = songidList.findIndex(item => item === tracks.id)
      } else {
        this.$store.commit('Music/pushSongList', tracks)
      }
      console.log('test1222 - findindex', index)
      console.log('test1222 - song.len', songList.length - 1)
      this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
    }
  },
  created() {
    this.getRecomDj()
  }
}
</script>

<style lang="less" scoped>
@import url(./RadioRecom.less);
</style>
